<template>
	<!-- <jf-navigation through>
		<template #back>
			<cover-view class="info_navigation_back">
				<cover-image src="@/static/images/index/icon013.png" class="info_navigation_back"></cover-image>
			</cover-view>
		</template>
		<template #right v-if="data.loadEnd">
			<cover-view class="info_navigation">
				<cover-image src="@/static/images/index/icon008.png" class="info_navigation_icon"
					@click="share()"></cover-image>
			</cover-view>
		</template>
	</jf-navigation> -->

	<view class="wrp" v-if="data.info">
		<cover-view class="video_bg" v-if="data.loadEnd">
			<video id="video" :src="data.info.video_path" class="video_content" :controls="false" :loop="true"
				:show-center-play-btn="false" @play="data.playing = true" @pause="data.playing = false"
				autoplay></video>
		</cover-view>

		<cover-view class="video_mask" @click="play()">
			<cover-image class="video_play" src="@/static/images/index/play.png" @click="play()"
				v-if="!data.playing"></cover-image>
		</cover-view>
		
		<cover-view class="info_navigation_back" :style="{'top':data.navigationBarHeight+'rpx'}" @click="back()">
			<cover-image src="@/static/images/index/icon013.png"></cover-image>
		</cover-view>
		
		<cover-view class="right_btns">
			<cover-view class="info_btn" @click="data.showCommentList = true">
				<cover-image src="@/static/images/index/icon001.png"></cover-image>
				<cover-view>{{data.info?data.info.comment_num:0}}</cover-view>
			</cover-view>
			<cover-view class="info_btn" @click="article.collect(data.info)">
				<cover-image :src="data.info && data.info.is_collect === 1 ? collectIcon : unCollectIcon"></cover-image>
				<cover-view>{{data.info?data.info.collect:0}}</cover-view>
			</cover-view>
			<cover-view class="info_btn" @click="article.star(data.info, 1)">
				<cover-image :src="data.info && data.info.is_star === 1 ? starIcon : unStarIcon"></cover-image>
				<cover-view>{{data.info?data.info.star:0}}</cover-view>
			</cover-view>

			<cover-view class="info_btn" @click="article.star(data.info, 1)">
				<cover-image src="@/static/images/index/icon008.png"></cover-image>
				<cover-view>{{data.info?data.info.share:0}}</cover-view>
			</cover-view>
		</cover-view>


		<cover-view class="user-info">
			<cover-view class="user-head">
				<cover-image :src="data.info.publisher.avatar" v-if="data.info && data.info.publisher"></cover-image>
				<cover-view class="user-name">Windir</cover-view>
				<cover-view class="user-btn">关注</cover-view>
			</cover-view>
			<cover-view class="tz-content">
				<cover-view>每天早晨96岁的艾米莉都会和小克洛伊在村子里走一走这也是他们最简单的快乐时光，相信一切都会好起来的#记录美好生活 #发布日常</cover-view>
				<cover-image src="@/static/images/index/icon010.png"></cover-image>
			</cover-view>
		</cover-view>
	</view>



	<jf-fixed>
		<cover-view class="info_btns">
			<cover-view class="info_input" @click="openComment()">
				<cover-image src="@/static/images/index/icon002.png"></cover-image>
				<cover-view>{{$t('index.info.comment')}}</cover-view>
			</cover-view>
		</cover-view>
	</jf-fixed>

	<Comment v-model="data.showComment" :type="data.commentType" :info="data.commentInfo" :article="article"></Comment>

	<jf-popup v-model="data.showCommentList" :showTitle="false" scroll height="60vh"
		@scrolltolower="getCommentList(data.currentIndex + 1)">
		<jf-comment v-model="data.commentList" @reply="reply" @star="star" @more="more"></jf-comment>
	</jf-popup>
</template>

<script lang="ts" setup>
	import headerIcon from "@/static/images/common/header_icon.png"
	import starIcon from "@/static/images/index/icon019.png"
	import unStarIcon from "@/static/images/index/icon004.png"
	import collectIcon from "@/static/images/index/icon018.png"
	import unCollectIcon from "@/static/images/index/icon007.png"
	import { reactive, getCurrentInstance } from 'vue'
	import { onLoad, onReachBottom } from "@dcloudio/uni-app"
	import DateTimeUtils from "@/static/utils/DateTimeUtils"
	import Methods from "../Methods"
	import Comment from "@/components/Comment"
	import { useStore } from "@/store/main"

	const { proxy } = getCurrentInstance()
	const store = useStore()
	const data = reactive({
		current: 0,
		currentIndex: 0,
		commentList: [],
		locale: '',
		loadEnd: false,
		loadError: false,
		info: null,
		showComment: false,
		showCommentList: false,
		focus: false,
		comment: undefined,
		commentInfo: undefined,
		commentType: 1,
		playing: false,
		navigationBarHeight: 0
	})
	let video = null
	const canvas = uni.createCanvasContext('canvas', proxy)
	const article = new Methods()

	const share = () : void => {
		uni.setClipboardData({
			data: data.info.secret_code,
			showToast: false,
			success: () => {
				uni.showToast({
					title: proxy.$t("index.info.shareMessage"),
					icon: "none"
				})
			}
		})
	}
	const navGo = (url : string) : void => {
		uni.navigateTo({ url })
	}
	const getCurrent = (event : any) : void => {
		data.current = event.target.current
	}
	const selMenu = (index : number) : void => {
		data.commentList = []
		data.currentIndex = index
		getCommentList(index + 1, true)
	}
	const preview = (current : string) : void => {
		uni.previewImage({
			urls: data.info.image_input,
			current
		})
	}
	const getCommentList = (type : number, init ?: boolean) : void => {
		article.getComment(type, init).then((list : any) => {
			data.commentList = list
		})
	}
	const reply = (comment : any, type : number) : void => {
		data.commentInfo = comment
		data.commentType = type
		data.showComment = true
	}
	const openComment = () : void => {
		data.commentInfo = undefined
		data.commentType = 1
		data.showComment = true
	}
	const star = (item : any) : void => {
		console.log(2)
		article.star(item, 2)
	}
	const more = (item : any) : void => {
		article.loadComment(item)
	}
	const play = () : void => {
		if (!data.playing) {
			video.play()
		} else {
			video.pause()
		}
	}
	
	const back = () : void => {
		console.log("back",back)
		uni.navigateBack();
	}

	onLoad((options) => {
		uni.setNavigationBarColor({
			frontColor: 'white',
		});
		// 获取系统信息
		const systemInfo = uni.getSystemInfoSync();
		console.log(systemInfo); // 输出系统信息对象
		// 获取导航栏高度
		const navigationBarHeight = systemInfo.statusBarHeight + (systemInfo.platform === 'ios' ? 44 : 0) + (systemInfo.navigationBarHeight || 48);
		data.navigationBarHeight = navigationBarHeight;
		data.locale = uni.getLocale().replace("-", "_")
		article.getInfo(Number(options.id)).then((info : any) => {
			console.log("info", info);
			data.info = info
			data.loadEnd = true
			selMenu(0)
			store.setStar(info.id, info.is_star)
			store.setFans(info.publisher.uid, info.publisher.is_subscribe)
			video = uni.createVideoContext("video", proxy)
			setTimeout(() => {
				canvas.drawImage(video, 0, 0, 200, 300)
				canvas.draw()
			}, 300)
		}).catch(() => {
			data.loadError = true
		})
	})
</script>

<style lang="scss">
	.info_navigation {
		@include layout();

		.info_navigation_header {
			width: 72rpx;
			height: 72rpx;
			border-radius: 36rpx;
		}

		.info_navigation_name {
			font-weight: 400;
			line-height: 32rpx;
			margin-left: 12rpx;
			font-size: 28rpx;
		}

		.info_navigation_btn {
			--btn-color: #535A69;
			line-height: 56rpx;
			border: 2rpx solid var(--btn-color);
			padding: 0 24rpx;
			box-sizing: border-box;
			font-weight: 400;
			color: var(--btn-color);
			font-size: 24rpx;
			border-radius: 28rpx;

			&.active {
				--btn-color: #326AFF;
			}
		}

		.info_navigation_icon {
			width: 44rpx;
			height: 44rpx;
			margin-left: 24rpx;
		}
	}

	.wrp {
		width: 100vw;
		height: calc(100vh - 110rpx);
		background: rgba(0, 0, 0, 1);
		position: fixed;
		left: 0px;
		top: 0px;
	}

	.video_bg {
		width: 100vw;
		height: calc(100vh - 110rpx);
		// background: rgba(0, 0, 0, 1);
		position: relative;
		background: #326AFF;
        z-index: 1;
		.video_content {
			width: 100%;
			height: 100%;
		}
	}

	.video_mask {
		position: relative;
		width: 100vw;
		height: calc(100vh - 110rpx);
		z-index: 1;
		.video_play {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 144rpx;
			height: 144rpx;
		}
	}

	.info_btns {
		position: relative;
		z-index: 999;
		width: 100vw;
		height: 110rpx;
		border-top: 2rpx solid #EDEFF3;
		@include layout();
		padding: 0 32rpx;
		box-sizing: border-box;
		background: #000;

		.info_input {
			@include layout();
			flex-grow: 1;
			height: 72rpx;
			background: rgba(242, 244, 246, 0.1);
			border-radius: 36rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			font-weight: 400;

			cover-view {
				color: #5a5c5e;
				line-height: 40rpx;
				font-size: 28rpx;
			}

			cover-image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}

		.info_btn {
			@include layout();
			height: 72rpx;
			margin-left: 24rpx;
			font-family: Avenir;
			font-weight: 500;
			line-height: 24rpx;
			font-size: 24rpx;

			cover-image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}
	}

	.right_btns {
		right: 32rpx;
		position: fixed;
		bottom: 300rpx;
		z-index: 100;

		.info_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-bottom: 48rpx;

			cover-view {
				font-weight: 500;
				font-size: 24rpx;
				color: #fff;
			}

			cover-image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.user-info {
		position: fixed;
		width: 690rpx;
		padding: 0px 30rpx;
		bottom: 142rpx;
		z-index: 100;
		overflow: hidden;
		line-height: normal;
		transform: translateY(0);

		.user-head {
			display: flex;
			align-items: center;
			position: relative;
			line-height: normal;

			.user-name {
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				margin: 0px 24rpx;
				line-height: normal;
			}

			.user-btn {
				background: #326AFF;
				border-radius: 32rpx;
				border: 1px solid #FFFFFF;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				padding: 6rpx 30rpx;
				line-height: normal;
				text-align: center;
			}

			cover-image {
				width: 72rpx;
				height: 72rpx;
				border-radius: 36rpx;
				// border: 1rpx solid #FFFFFF;
				transform: translateY(0);
				overflow: hidden;
			}
		}

		.tz-content {
			width: 690rpx;
			margin-top: 30rpx;
			display: flex;
			flex-wrap: wrap;

			cover-view {
				width: 600rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: normal;
				white-space: normal; //规定段落中的文本不进行换行
				word-break: break-all; //允许单词中换行，在容器的最右边进行断开不会浪费空间
				word-wrap: break-word; //防止长单词溢出，单词内部断句
				word-break: break-word; //如果不想单词内断行可以进行单词间的断行
			}

			cover-image {
				width: 28rpx;
				height: 28rpx;
				display: block;
				margin-left: 20rpx;
			}
		}

	}
	
	.info_navigation_back {
		position: fixed;
		z-index: 100;
		left:30rpx;
		top:40rpx;
		overflow: hidden;
		line-height: normal;
		cover-image{
			width: 44rpx;
			height: 44rpx;
			display: block;
		}
	}
</style>